<template>
	<view class="wrap">
		
		<view class="theForm">
			<form @submit="formSubmit">
				<view class="fields-box">
					<view>快递公司</view>
					<view>
						<picker mode="selector" :range="items" range-key="title" @change="onPickerChange">
						  <view class="picker">
							{{ selectedItem ? selectedItem.title : '请选择' }}
						  </view>
						</picker>
					</view>
				</view>
				<view class="fields-box">
					<view>快递单号</view>
					<view>
						<input type="text" class="uni-input" name="danhao" :value="danhao" placeholder="快递单号" />
					</view>
				</view>
				
				
				<view class="btn">
					<button form-type="submit">确认邮寄</button>
				</view>
				
			</form>
		</view>
		
		
	</view>
</template>

<script>
	import MallInfo from '@/components/tool/info.vue'
	export default {
		components:{
			MallInfo
		},
		data(){
			return {
				isError: false,
				isSubmit: false,
				orderId: 0,
				order:{
					item: [],
					order_amount: "",
					order_no: "",
					payable_freight: '',
					payable_amount: "",
					promotions: "",
					real_amount: ""
				},
				items: [],
				selectedItem: null,
				danhao:''
			};
		},
		onLoad(options) {
			this.isError = false;
			this.orderId = options.id;
			this.$http.getTgOrderDetail({
				id: this.orderId
			}).then((res)=>{
				if(res.status){
					this.order = res.data.order;
					console.log(res.data);
					this.items = res.data.freight_list;
				}else{
					this.$utils.msg(res.info);
				}
				
				this.isError = false;
			}).catch((err)=>{
				this.isError = true;
			});
		},
		methods: {
			onPickerChange(e) {
			  const index = e.detail.value;
			  this.selectedItem = this.items[index];
			},
			formSubmit(e){
				let formdata = e.detail.value;
				if(this.isSubmit){
					return false;
				}
				if(!this.selectedItem){
					this.$utils.msg("请选择快递");
					return ;
				}
				if(formdata.danhao.length <= 0){
					this.$utils.msg("请填写单号");
					return ;
				}
				
				let params = {
					id: this.orderId,
					kuaidi_id: this.selectedItem.id,
					danhao: formdata.danhao,
				};
				this.$utils.showLoading();
				this.isSubmit = true;
				this.$http.postTgOrderDelivery(params).then(res=>{
					this.$utils.hideLoading();
					if(res.status){
						this.$utils.msg(res.info);
						this.$utils.redirectTo('tuoguan/devices');
					}else{
						this.$utils.msg(res.info);
					}
					
					this.isSubmit = false;
				}).catch(err=>{
					this.$utils.hideLoading();
					this.isSubmit = false;
					this.$utils.msg("网络出错，请检查网络是否连接");
				});
			}
		}
	}
</script>


<style lang="scss" scoped>
	.wrap{
	    width: 100%;
	    height: 100vh;
	    background-color: #fff;
	}
	
	.theForm{
		width: 650rpx;
		padding-top: 50rpx;
		margin: 0 auto;
		.fields-box{
			width: 100%;
			float: left;
			font-size: 31rpx;
			height: 110rpx;
			line-height: 110rpx;
			border: 2rpx solid #e0e0e0;
			border-left: 0;
			border-right: 0;
			&:nth-child(1){
				border-top: 0;
				border-bottom: 0;
			}
			&:nth-child(2){
				border-bottom: 0;
			}
			&:nth-child(3){
				border-bottom: 0;
			}
			view:first-child {
				float: left;
				width: 160rpx;
				color: #999;
			}
			view:last-child {
				float: right;
				width: 490rpx;
				color: #333;
				input {
					height: 110rpx;
					line-height: 110rpx;
				}
			}
		}
		.switch-box{
			background-color: #fff;
			width: 100%;
			float: left;
			font-size: 31rpx;
			height: 110rpx;
			line-height: 110rpx;
			view:first-child {
				float: left;
				color: #999;
			}
			view:last-child {
				float: right;
			}
		}
		.btn{
			float: left;
			margin: 25rpx 0;
			button {
				width: 650rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				background-color: #78C0F9;
				border: 1px solid #78C0F9;
				color: #fff;
				font-size: 33rpx;
			}
		}
	}
</style>